<template>
  <div class="wrapper" v-if="types">
    <header-nav :index_num="index_num"></header-nav>
      <div id="box">
        <h3>项目信息优化</h3>
            <div class="box">
        <div
          :class="sub == 0 ? 'color' : ''"
          :style="{
            'background-image':
              sub == 0 ? 'url(' + imgUrl.bg0 + ')' : 'url(' + imgUrl.bg1 + ')'
          }"
        >1 填写基本信息</div>
        <div
          :class="sub == 1 ? 'color' : ''"
          :style="{
            'background-image':
              sub == 1 ? 'url(' + imgUrl.bg0 + ')' : 'url(' + imgUrl.bg1 + ')'
          }"
        >2 填写详细信息</div>
      </div>

      <div class="form">
            <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
          v-show="sub == 0"
        >
          <div style="display:flex">
            <el-form-item label="项目名称" prop="name" :error="errorMsg">
              <el-input v-model="ruleForm.name" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="项目申报单位" prop="company">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.company" style="width:350px"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex;">
            <el-form-item label="项目类别" prop="tid" style="margin-right:132px">
              <el-select v-model="ruleForm.tid" placeholder="请选择项目类型" @change="change">
                <el-option v-for="(type, index) in types" :key="index" :label="type" :value="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目落地区域" prop="rid">
              <!-- ruleForm.region -->
              <el-select v-model="ruleForm.rid" placeholder="请选择活动区域" @change="change1">
                <el-option v-for="(list, index) in area" :key="index" :label="list" :value="index"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div style="display:flex">
            <el-form-item label="一级项目方向" prop="first_level" style="margin-right:132px">
              <el-select v-model="ruleForm.first_level" placeholder="请选择活动区域" @change="change2">
                <el-option
                  v-for="(list, index) in first_levels"
                  :key="index"
                  :label="list"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级项目方向" prop="secondary">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.secondary" style="width:350px"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex">
            <el-form-item label="三级项目方向" prop="fieldeara">
              <el-input v-model="ruleForm.fieldeara" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="项目服务领域" prop="attribute">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.attribute" style="width:350px"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="申请日期" required style="margin-right:125px">
            <el-col :span="11">
              <el-form-item prop="aterm">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.aterm"
                  style="width: 70%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <!-- <el-col class="line" :span="2">-</el-col> -->
            <el-col :span="11">
              <el-form-item prop="fterm" label="截止日期" style="margin-left:-46px">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.fterm"
                  style="width:125%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <div style="display:flex">
            <el-form-item label="通讯地址" prop="postaladdress">
              <el-input v-model="ruleForm.postaladdress" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码" prop="postalcode">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.postalcode" style="width:350px"></el-input>
            </el-form-item>
          </div>

          <div style="display:flex">
            <el-form-item label="电子邮箱" prop="pmail">
              <el-input v-model="ruleForm.pmail" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="申报单位属性" prop="fax_tel">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.fax_tel" style="width:350px"></el-input>
            </el-form-item>
          </div>

          <div style="display:flex">
            <el-form-item label="法定代表人" prop="plegal">
              <el-input v-model="ruleForm.plegal" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="plcode">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.plcode" style="width:350px"></el-input>
            </el-form-item>
          </div>

          <div style="display:flex">
            <el-form-item label="负责人姓名" prop="pname" style="margin-right:-69px">
              <el-input v-model="ruleForm.pname" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="职务" prop="poster" style="margin-right:-39px">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.poster" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="办公电话" prop="poffice_tel" style="margin-right:-69px">
              <el-input v-model="ruleForm.poffice_tel" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="aphone" style="margin-right:-69px">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.aphone" style="width:150px"></el-input>
            </el-form-item>
          </div>

          <div style="display:flex;width:400px;">
            <el-form-item label="联系人姓名" prop="cname" style="margin-right:-69px">
              <el-input v-model="ruleForm.cname" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="职务" prop="cpost" style="margin-right:-39px">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.cpost" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="办公电话" prop="coffice_tel" style="margin-right:-69px">
              <el-input v-model="ruleForm.coffice_tel" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="cphone" style="margin-right:-69px">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.cphone" style="width:150px"></el-input>
            </el-form-item>
          </div>
          <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> -->
          <el-form-item>
            <div class="btn" @click="submitForm('ruleForm')" style="cursor:pointer">下一页</div>

            <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>-->
          </el-form-item>
        </el-form>
      </div>

       <el-form
        :model="ruleForm1"
        :rules="rules1"
        ref="ruleForm1"
        label-width="150px"
        class="demo-ruleForm"
        v-show="sub == 1"
      >
       <el-form-item label="项目主责单位" prop="prespo">
          <el-input v-model="ruleForm1.prespo"></el-input>
        </el-form-item>
        <div style="display:flex">
          <el-form-item label="通讯地址" prop="respoadd">
            <el-input v-model="ruleForm1.respoadd" style="width:350px"></el-input>
          </el-form-item>
          <el-form-item label="邮政编码" prop="respopcode">
            <!-- ruleForm.region -->
            <el-input v-model="ruleForm1.respopcode" style="width:350px"></el-input>
          </el-form-item>
        </div>

        <div style="display:flex">
          <el-form-item label="电子邮箱" prop="respomail">
            <el-input v-model="ruleForm1.respomail" style="width:350px"></el-input>
          </el-form-item>
          <el-form-item label="传真电话" prop="respophone">
            <!-- ruleForm.region -->
            <el-input v-model="ruleForm1.respophone" style="width:350px"></el-input>
          </el-form-item>
        </div>

        <div style="display:flex">
          <el-form-item label="负责人姓名" prop="respopname" style="margin-right:-69px">
            <el-input v-model="ruleForm1.respopname" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="职务" prop="respopost" style="margin-right:-69px">
            <!-- ruleForm.region -->
            <el-input v-model="ruleForm1.respopost" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="办公电话" prop="respoophone" style="margin-right:-69px">
            <el-input v-model="ruleForm1.respoophone" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="respoptel2" style="margin-right:-69px">
            <!-- ruleForm.region -->
            <el-input v-model="ruleForm1.respoptel" style="width:150px"></el-input>
          </el-form-item>
        </div>

        <div style="display:flex;width:400px;">
          <el-form-item label="联系人姓名" prop="respocname" style="margin-right:-69px">
            <el-input v-model="ruleForm1.respocname" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="职务" prop="respocpost" style="margin-right:-69px">
            <!-- ruleForm.region -->
            <el-input v-model="ruleForm1.respocpost" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="办公电话" prop="respocophone" style="margin-right:-69px">
            <el-input v-model="ruleForm1.respocophone" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="respoctel2" style="margin-right:-69px">
            <!-- ruleForm.region -->
            <el-input v-model="ruleForm1.respoctel" style="width:150px"></el-input>
          </el-form-item>
        </div>

         <div class="xx">
          <h5>二、申报单位简介</h5>
          <div class="rich">
            <aboutUs @aboutUs="aboutUs" :aboutUsVal="ruleForm.decldes" :writeable="true"></aboutUs>
          </div>
        </div>
        <div class="xx">
          <h5>三、项目简介</h5>
          <div class="rich">
            <ProjectBrief
              @projectBrief="projectBrief"
              :projectBriefVal="ruleForm.prodes"
              :writeable="true"
            ></ProjectBrief>
          </div>
        </div>
        <div class="xx">
          <h5>四、项目论证</h5>
          <h3>(一) 项目实施的必要性、可行性</h3>
          <div class="rich">
            <ProjectAssessment
              @projectAssessment="projectAssessment"
              :projectAssessmentVal="ruleForm.prodemo"
              :writeable="true"
            ></ProjectAssessment>
          </div>
          <h3>
            (二)
            项目实施的已有基础、具体方法和途径及进度安排、预期效果及完成时间
          </h3>
          <p>1.项目实施的已有基础</p>
          <article>〔说明：包括但不限于项目实施已有的相关经验或有助于项目实施的资源支持等。〕</article>
          <div class="rich">
            <ExistingBasis
              @existingBasis="existingBasis"
              :existingBasisVal="ruleForm.prodemojc"
              :writeable="true"
            ></ExistingBasis>
          </div>
          <p>2.具体方法和途径</p>
          <article>〔说明：包括项目实施的具体方式、途径。明确项目的具体组成内容（子项目、各类服务等），每类、每次活动的具体内容、形式、对象、次数、人数等。〕</article>
          <div class="rich">
            <MethodsWay
              @methodsWay="methodsWay"
              :methodsWayVal="ruleForm.prodemotj"
              :writeable="true"
            ></MethodsWay>
          </div>
          <p>3.进度安排</p>
          <article>〔说明：可单独作为一部分，也可与“具体方法和途径”一并细化到子项目中说明。建议时间单元为月，不建议简单表述为“年内”、“上半年”、“下半年”、“第*季度”等。〕</article>
          <div class="rich">
            <scheduling
              @scheduling="scheduling"
              :schedulingVal="ruleForm.prodemojd"
              :writeable="true"
            ></scheduling>
          </div>
          <p>4.预期效果</p>
          <article>〔说明：具体明确项目实施所要达到的目标或预期的效果。〕</article>
          <div class="rich">
            <DesiredEffect
              @desiredEffect="desiredEffect"
              :desiredEffectVal="ruleForm.prodemoxg"
              :writeable="true"
            ></DesiredEffect>
          </div>
          <p>5.项目团队及分工</p>
          <article>〔说明：包括项目实施的组织管理机构组成，各子项目或各项服务活动的具体承接单位和负责人，各有关协作单位等。要把可能引起转包怀疑的所有事项交代清楚，避免在检查、审计和评估中产生误解。〕</article>
          <div class="rich">
            <DivisionLabor
              @divisionLabor="divisionLabor"
              :divisionLaborVal="ruleForm.prodemofg"
              :writeable="true"
            ></DivisionLabor>
          </div>
          <h3>(三) 项目实施涵盖的范围、实施的规模、服务的人群，创新之处等</h3>
          <div class="rich">
            <cover @cover="cover" :coverVal="ruleForm.prodemotwo" :writeable="true"></cover>
          </div>
        </div>
        <div class="xx">
          <h5>五、经费预算</h5>
          <div class="rich">
            <RichTextOne @quillVal="quillVal" :initialTextVal="ruleForm.funds" :writeable="true"></RichTextOne>
          </div>
        </div>
        <div class="xxx">
          <h5 style="font-size:20px">六、申报单位承诺</h5>
          <div class="plpl" style="margin-top:32px;">
            <span
              @click="thf()"
              :class="ruleForm.thff ? 'ic' : ''"
              class="iconfont icon-fuxuankuang_xuanzhong"
            ></span>
            <label>我们确认项目申报内容的真实性,并愿意承担相应的责任</label>
          </div>
        </div>

          <div class="xxx">
          <h5 style="font-size:20px">七、项目主责单位意见</h5>
          <!-- <p
            class="yulantext"
            @click="yulana1(fileLists[0])"
            style="left:401px;top:95px"
            v-if="fileLists.length"
          >预览</p> -->
          <div class="xxxx">
            <template>
              <el-upload
                class="upload-demo"
                :action="$upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="successUpload"
                :before-remove="beforeRemove"
                multiple
                :limit="10"
                :on-exceed="handleExceed"
                :file-list="fileLists"
              >
              <!-- :title="fileLists?(fileLists.length?fileLists[0].name:''):''" -->
                <el-button size="small" type="primary">上传文件</el-button>
                <!-- <span slot="tip" class="el-upload__tip">只能上传一张不同的图片</span> -->
              </el-upload>
            </template>
          </div>
        </div>

        <div class="mid_box">
          <template>
            <div class="el-icon-close close" @click="del" v-if="filename"></div>
            <div>
              <el-upload
                class="avatar-uploader"
                :action="$upload"
                :show-file-list="false"
                style="position: relative"
                :http-request="uploadfile"
              >
                <div style="position: absolute;z-index:9999;width:72px;left:52px;top:36px">
                  <!-- {{uploadname[2]}} -->
                  <!--   -->
                  <el-progress
                    v-if="uploadname[0] && uploadname[0] != 100"
                    :text-inside="true"
                    :stroke-width="16"
                    :percentage="uploadname[0]"
                    status="success"
                  ></el-progress>
                </div>
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <!-- <p class="box1">
                
              {{filename?filename:''}}</p>-->
              <!--  :content="filename" -->
              <div class="box1"></div>
              <p style="text-align:center;margin-bottom:10px" v-if="filename.length">
                <el-tooltip class="item" effect="dark" placement="top" :content="filename">
                  <!-- <div
                    slot="content"
                    style="width:400px"
                  >{{filename}}</div> -->
                  <!-- <a
                    :href="ruleForm.probook"
                    target="_blank"
                    style="width:157px;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"
                  >{{filename?(filename.split('.')[0]).split('_')[0]+'.'+filename.split('.')[1]:''}}</a> -->
                  <a
                    :href="ruleForm.probook"
                    target="_blank"
                    style="width:100px;margin-left:40px;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"
                  >{{filename?filename:''}}</a>
                </el-tooltip>
              </p>
              <div class="filenames" v-if="filename">
                <a :href="fileurl" class="yulan" target="_blank" style="color:#409eff;margin-left:10px">下载</a>
              </div>
              <p class="box1" style="font-weight:bold;margin-left:30px">
                上传项目申报书
                <span
                  style="font-size:10px;color:red;postion:relative;top:-3px;font-weight:bold"
                >*</span>
              </p>
            </div>

            <!--文件上传-->
          </template>
          <template>
            <div class="el-icon-close close" @click="del1" v-if="filename1"></div>
            <div>
              <el-upload
                class="avatar-uploader"
                :action="$upload"
                :show-file-list="false"
                style="position: relative"
                :http-request="uploadfile1"
              >
                <div style="position: absolute;z-index:9999;width:72px;left:52px;top:36px">
                  <!-- {{uploadname[2]}} -->
                  <!--   -->
                  <el-progress
                    v-if="uploadname[1] && uploadname[1] != 100"
                    :text-inside="true"
                    :stroke-width="16"
                    :percentage="uploadname[1]"
                    status="success"
                  ></el-progress>
                </div>
                <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div v-if="filename1" style="text-align:center;margin-top:18px;margin-bottom:10px;">
                <p>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="filename1"
                    placement="top"
                  >
                    <a
                      :href="ruleForm.fangan"
                      target="_blank"
                      style="width:100px;margin-left:40px;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"
                    >{{filename1?filename1:''}}</a>
                  </el-tooltip>
                </p>
              </div>

              <div class="filenames" v-if="filename1">
                <a :href="fileurl1" class="yulan" target="_blank" style="color:#409eff;margin-left:10px">下载</a>
              </div>
              <!-- <p class="box1">{{filename1?filename1:''}}</p> -->
              <p class="box1" style="font-weight:bold;margin-left:40px">
                上传实施方案
                <span
                  style="font-size:10px;color:red;postion:relative;top:-3px;font-weight:bold"
                >*</span>
              </p>
            </div>

            <!--文件上传-->
          </template>
          <template>
            <div class="el-icon-close close" @click="del2" v-if="filename2"></div>
            <div>
              <el-upload
                class="avatar-uploader"
                :action="$upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess2"
                style="position: relative"
                :http-request="uploadfile2"
              >
                <div style="position: absolute;z-index:9999;width:72px;left:52px;top:36px">
                  <!-- {{uploadname[2]}} -->
                  <!--   -->
                  <el-progress
                    v-if="uploadname[2] && uploadname[2] != 100"
                    :text-inside="true"
                    :stroke-width="16"
                    :percentage="uploadname[2]"
                    status="success"
                  ></el-progress>
                </div>
                <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div v-if="filename2" style="margin-top:18px;">
                <p style="margin-bottom:10px">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="filename2"
                    placement="top"
                  >
                    <a
                      :href="ruleForm.pifu"
                      target="_blank"
                      style="width:100px;margin-left:40px;white-space:nowrap;display:block;overflow:hidden;text-overflow: ellipsis;text-align:center"
                    >{{filename2?filename2:''}}</a>
                  </el-tooltip>
                   
                  <!-- <a :href="ruleForm.pifu" target="_blank">{{filename2?filename2:''}}</a> -->
                </p>
                <div style="width:170px;text-align:center">
                 
                  <a :href="fileurl2" class="yulan" target="_blank" style="color:#409eff;margin-left:10px;cursor:pointer">下载</a>
                  <!-- {{fileurl2}} -->
                  <!-- <a :href="ruleForm.pifu"  class="yulan" target="_blank" style="color:#409eff;margin-left:10px">{{ruleForm.pifu.substring(ruleForm.pifu.lastIndexOf(".")+1)=='txt'||uleForm.pifu.substring(ruleForm.pifu.lastIndexOf(".")+1)=='jpg'||uleForm.pifu.substring(ruleForm.pifu.lastIndexOf(".")+1)=='png'?'预览':'下载'}}</a> -->
                </div>
              </div>

              <!-- <p class="box1">{{filename2?filename2:''}}</p> -->
              <p class="box1" style="font-weight:bold;margin-left:30px">上传立项批复文件</p>
            </div>
            <!--文件上传-->
          </template>
          <template>
            <div class="el-icon-close close" @click="del3" v-if="filename3"></div>
            <div>
              <el-upload
                class="avatar-uploader"
                :action="$upload"
                :show-file-list="false"
                style="position: relative"
                :http-request="uploadfile3"
              >
                <div style="position: absolute;z-index:9999;width:72px;left:52px;top:36px">
                  <!-- {{uploadname[2]}} -->
                  <!--   -->
                  <el-progress
                    v-if="uploadname[3] && uploadname[3] != 100"
                    :text-inside="true"
                    :stroke-width="16"
                    :percentage="uploadname[3]"
                    status="success"
                  ></el-progress>
                </div>
                <img v-if="imageUrl3" :src="imageUrl3" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div v-if="filename3">
                <p style="margin-top:18px;margin-bottom:10px">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="filename3"
                    placement="top"
                  >
                    <a
                      :href="ruleForm.pact"
                      target="_blank"
                      style="width:100px;margin-left:40px;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"
                    >{{filename3?filename3:''}}</a>
                  </el-tooltip>
                  <!-- <a :href="ruleForm.pact" target="_blank">{{filename3?filename3:''}}</a> -->
                </p>
                <div style="width:170px;text-align:center">
                  <a :href="fileurl3" class="yulan" target="_blank" style="color:#409eff;margin-left:10px">下载</a>
                </div>
              </div>

              <!-- <p class="box1">{{filename3?filename3:''}}</p> -->
              <p class="box1" style="font-weight:bold;margin-left:40px">上传项目合同</p>
            </div>

            <!--文件上传-->
          </template>
          <template>
            <div class="el-icon-close close" @click="del4" v-if="filename4"></div>
            <div>
              <el-upload
                class="avatar-uploader"
                :action="$upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess4"
                style="position: relative"
                :http-request="uploadfile4"
              >
                <div style="position: absolute;z-index:9999;width:72px;left:53px;top:36px">
                  <!-- {{uploadname[2]}} -->
                  <!--   -->
                  <el-progress
                    v-if="uploadname[4] && uploadname[4] != 100"
                    :text-inside="true"
                    :stroke-width="16"
                    :percentage="uploadname[4]"
                    status="success"
                  ></el-progress>
                </div>
                <img v-if="imageUrl4" :src="imageUrl4" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div class="box1" v-if="filename4">
                <p style="margin-bottom:10px">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="filename4"
                    placement="top"
                  >
                    <a
                      :href="ruleForm.promise"
                      target="_blank"
                      style="width:100px;margin-left:12px;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"
                    >{{filename4?filename4:''}}</a>
                  </el-tooltip>
                </p>
                <div style="text-align:center">
                  <a :href="fileurl4" class="yulan" target="_blank" style="color:#409eff;margin-left:-20px">下载</a>
                </div>
              </div>

              <!-- <p class="box1">{{filename4?filename4:''}}</p> -->
              <p class="box1" style="font-weight:bold;margin-left:30px">上传服务承诺书</p>
            </div>
          </template>
        </div>

               <el-form-item>
          <div class="ll">
            <button type="button" @click="next(0)" style="cursor:pointer">上一页</button>
            <button type="button" @click="submitForm('ruleForm1',1)" style="cursor:pointer">保存</button>
            <button
              type="button"
              @click="submitForm('ruleForm',2)"
              class="tj"
              style="cursor:pointer"
            >提交</button>
          </div>
          <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>-->
        </el-form-item>
       </el-form>
      </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
const path = require("path");
const files = require.context("@/components", false, /\.vue$/);
const modules = {};
files.keys().forEach(key => {
  const name = path.basename(key, ".vue");
  modules[name] = files(key).default || files(key);
});
var preD = function(e) {
  e.preventDefault();
};
export default {
  components: modules,
  props: {},
  data() {
    return {
      uploadname: ["", "", "", "", ""],
      imageUrl: "",
      imageUrl1: "",
      imageUrl2: "",
      imageUrl3: "",
      imageUrl4: "",
      idProject: "",
      fileurl: "",
      fileurl1: "",
      fileurl2: "",
      fileurl3: "",
      fileurl4: "",
      filename: "",
      filename1: "",
      filename2: "",
      filename3: "",
      filename4: "",
      ruleForm: {
        name: "",
        company: "",
        tid: "",
        rid: "",
        first_level: "",
        secondary: "",
        fieldeara: "",
        attribute: "",
        aterm: "",
        fterm: "",
        postaladdress: "",
        postalcode: "",
        pmail: "",
        fax_tel: "",
        plegal: "",
        plcode: "",
        pname: "",
        poster: "",
        poffice_tel: "",
        aphone: "",
        cname: "",
        cpost: "",
        coffice_tel: "",
        cphone: "",

        decldes: "",
        prodes: "",
        party_id: null,
        prodemo: "",
        prodemojc: "",
        prodemotj: "",
        prodemojd: "",
        prodemoxg: "",
        prodemofg: "",
        prodemotwo: "",
        funds: "",
        proimages: "",
        status: 0,
        protime: "",
        thff: false
      },
      rules1: {
        prespo: [
          { required: true, message: "请输入项目主责单位", trigger: "blur" }
        ],
        respoadd: [
          { required: true, message: "请输入通讯地址", trigger: "blur" }
        ],
        respopcode: [
          { required: true, message: "请输入邮政编码", trigger: "blur" }
        ],
        respomail: [
          {
            required: true, //是否必填
            message: "请输入邮箱地址", //错误提示信息
            trigger: "blur" //检验方式（blur为鼠标点击其他地方，）
          },
          {
            type: "email", //要检验的类型（number，email，date等）
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        respopname: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" }
        ],
        respopost: [
          { required: true, message: "请输入负责人职务", trigger: "blur" }
        ],
        respoophone: [
          { required: true, message: "请输入负责人办公电话", trigger: "blur" }
        ],

        respocname: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" }
        ],
        respocpost: [
          { required: true, message: "请输入联系人职务", trigger: "blur" }
        ],
        respocophone: [
          { required: true, message: "请输入联系人办公电话", trigger: "blur" }
        ],

        respoptel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/, //可以写正则表达式呦呦呦
            message: "请输入正确的手机号",
            trigger: "change"
          }
        ],
        respoctel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/, //可以写正则表达式呦呦呦
            message: "请输入正确的手机号",
            trigger: "change"
          }
        ]
      },
      rules: {
        aterm: [{ required: true, message: "请选择申报日期", trigger: "blur" }],
        name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
        tid: [{ required: true, message: "请选择项目类型", trigger: "change" }],
        rid: [
          { required: true, message: "请选择项目落地区域", trigger: "change" }
        ],
        company: [
          { required: true, message: "请输入项目申报单位", trigger: "blur" }
        ],
        first_level: [
          { required: true, message: "请输入一级项目方向", trigger: "blur" }
        ],
        secondary: [
          { required: true, message: "请输入二级项目方向", trigger: "blur" }
        ],
        fieldeara: [
          { required: true, message: "请输入三级项目方向", trigger: "blur" }
        ],
        attribute: [
          { required: true, message: "请输入项目服务领域", trigger: "blur" }
        ],
        postaladdress: [
          { required: true, message: "请输入通讯地址", trigger: "blur" }
        ],
        postalcode: [
          { required: true, message: "请输入邮政编码", trigger: "blur" }
        ],
        pmail: [
          {
            required: true, //是否必填
            message: "请输入邮箱地址", //错误提示信息
            trigger: "blur" //检验方式（blur为鼠标点击其他地方，）
          },
          {
            type: "email", //要检验的类型（number，email，date等）
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        plegal: [
          { required: true, message: "请输入法定代表人", trigger: "blur" }
        ],
        plcode: [
          { required: true, message: "请输入法人代码", trigger: "blur" }
        ],
        pname: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" }
        ],
        poster: [{ required: true, message: "请输入职务", trigger: "blur" }],
        poffice_tel: [
          { required: true, message: "请输入办公电话", trigger: "blur" }
        ],
        aphone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/, //可以写正则表达式呦呦呦
            message: "请输入正确的手机号",
            trigger: "change"
          }
        ],
        cname: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" }
        ],
        cpost: [{ required: true, message: "请输入职务", trigger: "blur" }],
        coffice_tel: [
          { required: true, message: "请输入办公电话", trigger: "blur" }
        ],
        cphone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/, //可以写正则表达式呦呦呦
            message: "请输入正确的手机号",
            trigger: "change"
          }
        ],
        cphone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/, //可以写正则表达式呦呦呦
            message: "请输入正确的手机号",
            trigger: "change"
          }
        ]
      },
      errorMsg: "",
      index_num: 2,
      sub: 0,
      bgData: {},
      initialTextVal: "",
      initialText: "",
      aboutUsText: "",
      aboutUsVal: "",
      projectBriefVal: "",
      projectBriefText: "",
      projectAssessmentVal: "",
      projectAssessmentText: "",
      existingBasisVal: "",
      existingBasisText: "",
      methodsWayVal: "",
      methodsWayText: "",
      schedulingVal: "",
      schedulingText: "",
      desiredEffectVal: "",
      desiredEffectText: "",
      divisionLaborVal: "",
      divisionLaborText: "",
      coverVal: "",
      coverText: "",
      thff: false,
      imgUrl: {
        bg0: require("../../../static/img/bg0.png"),
        bg1: require("../../../static/img/bg1.png"),
        xa: require("../../../static/img/xa.png")
      },
      fileLists: [],
      hrefurl:'',
      popupStatus: false,
      first_levels: [],
      types: [],
      area: [],
      name: "",
      company: "",
      tid: "",
      rid: "",
      first_level: "",
      secondary: "",
      fieldeara: "",
      attribute: "",
      aterm: "",
      fterm: "",
      postaladdress: "",
      postalcode: "",
      pmail: "",
      fax_tel: "",
      plegal: "",
      plcode: "",
      pname: "",
      poster: "",
      poffice_tel: "",
      aphone: "",
      cname: "",
      cpost: "",
      coffice_tel: "",
      cphone: "",
      prespo: "",
      respoadd: "",
      respopcode: "",
      respomail: "",
      respophone: "",
      respoctel: "",
      respopname: "",
      respopost: "",
      respoophone: "",
      respoptel: "",
      respocname: "",
      respocpost: "",
      respocophone: "",
      decldes: "",
      prodes: "",
      prodemo: "",
      prodemojc: "",
      prodemotj: "",
      prodemojd: "",
      prodemoxg: "",
      prodemofg: "",
      prodemotwo: "",
      funds: "",
      proimages: "",
      subStatus: 0,
      picture: [],
      pid: 0,
      ruleForm1: {
        prespo: "",
        respoadd: "",
        respopcode: "",
        respomail: "",
        respophone: "",
        respopname: "",
        respopost: "",
        respoophone: "",
        respoptel: "",
        respocname: "",
        respocpost: "",
        respocophone: "",
        respoctel: ""
      },
      imgs: []
      // imgData: {
      //   accept: "image/gif, image/jpeg, image/png, image/jpg"
      // }
    };
  },
  computed: {},
  watch: {
    popupStatus(val) {
      if (val) {
        document.body.style.overflow = "hidden";
        document.addEventListener("touchmove", preD, {
          passive: false
        }); /** 禁止页面滑动 */
      } else {
        document.body.style.overflow = ""; /** 出现滚动条 */
        document.removeEventListener("touchmove", preD, { passive: false });
      }
    }
  },
  methods: {
    uploadfile(f) {
      console.log(f);
      let formdata = new FormData();
      formdata.append("file", f.file);
      this.$axios({
        url: "v1/file/files",
        method: "post",
        data: formdata,
        nol: 45,
        headers: { "Content-Type": "multipart/form-data" },
        onUploadProgress: progressEvent => {
          // progressEvent.loaded:已上传文件大小
          // progressEvent.total:被上传文件的总大小

          // this.uploadname =  parseInt(progressEvent.loaded / progressEvent.total * 100)
          // console.log(this.uploadno,"mmmmmm")

          this.$set(
            this.uploadname,
            0,
            parseInt((progressEvent.loaded / progressEvent.total) * 100)
          );
          console.log(this.uploadname, "asd");
        }
      })
        .then(res => {
          if(res.data.code == 200){
            if (this.uploadname[0] === 100) {
            // this.progressPercent = 0
            this.handleAvatarSuccess(res.data.data, f.file.name);
            // this.uploadfun.fun(res.data.data, f.file.name);
          }
          }else{
            this.$alert("上传的项目申报书文件上传失败,请修改文件名长度后重新上传", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
          }
          // this.imageUrl = res.data.data
          // if (this.uploadname[0] === 100) {
          //   // this.progressPercent = 0
          //   this.handleAvatarSuccess(res.data.data, f.file.name);
          //   // this.uploadfun.fun(res.data.data, f.file.name);
          // }
        })
        .then(error => {
          console.log(error);
        });
      return;
    },

    uploadfile1(f) {
      console.log(f);
      let formdata = new FormData();
      formdata.append("file", f.file);
      this.$axios({
        url: "v1/file/files",
        method: "post",
        data: formdata,
        nol: 45,
        headers: { "Content-Type": "multipart/form-data" },
        onUploadProgress: progressEvent => {
          // progressEvent.loaded:已上传文件大小
          // progressEvent.total:被上传文件的总大小

          // this.uploadname =  parseInt(progressEvent.loaded / progressEvent.total * 100)
          // console.log(this.uploadno,"mmmmmm")

          this.$set(
            this.uploadname,
            1,
            parseInt((progressEvent.loaded / progressEvent.total) * 100)
          );
          console.log(this.uploadname, "asd");
        }
      })
        .then(res => {
          if(res.data.code == 200){
            if (this.uploadname[1] === 100) {
            // this.progressPercent = 0
            this.handleAvatarSuccess1(res.data.data, f.file.name);
            // this.uploadfun.fun(res.data.data, f.file.name);
            }
          }else{
            this.$alert("上传的实施方案文件上传失败,请修改文件名长度后重新上传", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
          }
          // this.imageUrl = res.data.data
          // if (this.uploadname[1] === 100) {
          //   // this.progressPercent = 0
          //   this.handleAvatarSuccess1(res.data.data, f.file.name);
          //   // this.uploadfun.fun(res.data.data, f.file.name);
          // }
        })
        .then(error => {
          console.log(error);
        });
      return;
    },

    uploadfile2(f) {
      console.log(f);
      let formdata = new FormData();
      formdata.append("file", f.file);
      this.$axios({
        url: "v1/file/files",
        method: "post",
        data: formdata,
        nol: 45,
        headers: { "Content-Type": "multipart/form-data" },
        onUploadProgress: progressEvent => {
          // progressEvent.loaded:已上传文件大小
          // progressEvent.total:被上传文件的总大小

          // this.uploadname =  parseInt(progressEvent.loaded / progressEvent.total * 100)
          // console.log(this.uploadno,"mmmmmm")

          this.$set(
            this.uploadname,
            2,
            parseInt((progressEvent.loaded / progressEvent.total) * 100)
          );
          console.log(this.uploadname, "asd");
        }
      })
        .then(res => {
          if(res.data.code == 200){
            if (this.uploadname[2] === 100) {
            // this.progressPercent = 0
            this.handleAvatarSuccess2(res.data.data, f.file.name);
            // this.uploadfun.fun(res.data.data, f.file.name);
          }
          }else{
            this.$alert("上传的立项批复文件上传失败,请修改文件名长度后重新上传", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
          }
          // this.imageUrl = res.data.data
          // if (this.uploadname[2] === 100) {
          //   // this.progressPercent = 0
          //   this.handleAvatarSuccess2(res.data.data, f.file.name);
          //   // this.uploadfun.fun(res.data.data, f.file.name);
          // }
        })
        .then(error => {
          console.log(error);
        });
      return;
    },

    uploadfile3(f) {
      console.log(f);
      let formdata = new FormData();
      formdata.append("file", f.file);
      this.$axios({
        url: "v1/file/files",
        method: "post",
        data: formdata,
        nol: 45,
        headers: { "Content-Type": "multipart/form-data" },
        onUploadProgress: progressEvent => {
          // progressEvent.loaded:已上传文件大小
          // progressEvent.total:被上传文件的总大小

          // this.uploadname =  parseInt(progressEvent.loaded / progressEvent.total * 100)
          // console.log(this.uploadno,"mmmmmm")

          this.$set(
            this.uploadname,
            3,
            parseInt((progressEvent.loaded / progressEvent.total) * 100)
          );
          console.log(this.uploadname, "asd");
        }
      })
        .then(res => {
           if(res.data.code == 200){
            if (this.uploadname[3] === 100) {
            // this.progressPercent = 0
            this.handleAvatarSuccess3(res.data.data, f.file.name);
            // this.uploadfun.fun(res.data.data, f.file.name);
          }
          }else{
            this.$alert("上传的项目合同文件上传失败,请修改文件名长度后重新上传", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
          }
          // this.imageUrl = res.data.data
          // if (this.uploadname[3] === 100) {
          //   // this.progressPercent = 0
          //   this.handleAvatarSuccess3(res.data.data, f.file.name);
          //   // this.uploadfun.fun(res.data.data, f.file.name);
          // }
        })
        .then(error => {
          console.log(error);
        });
      return;
    },

    uploadfile4(f) {
      console.log(f);
      let formdata = new FormData();
      formdata.append("file", f.file);
      this.$axios({
        url: "v1/file/files",
        method: "post",
        data: formdata,
        nol: 45,
        headers: { "Content-Type": "multipart/form-data" },
        onUploadProgress: progressEvent => {
          // progressEvent.loaded:已上传文件大小
          // progressEvent.total:被上传文件的总大小

          // this.uploadname =  parseInt(progressEvent.loaded / progressEvent.total * 100)
          // console.log(this.uploadno,"mmmmmm")

          this.$set(
            this.uploadname,
            4,
            parseInt((progressEvent.loaded / progressEvent.total) * 100)
          );
          console.log(this.uploadname, "asd");
        }
      })
        .then(res => {
          // this.imageUrl = res.data.data
          // if (this.uploadname[4] === 100) {
          //   // this.progressPercent = 0
          //   this.handleAvatarSuccess4(res.data.data, f.file.name);
          //   // this.uploadfun.fun(res.data.data, f.file.name);
          // }
          if(res.data.code == 200){
             if (this.uploadname[4] === 100) {
            // this.progressPercent = 0
            this.handleAvatarSuccess4(res.data.data, f.file.name);
            // this.uploadfun.fun(res.data.data, f.file.name);
          }
          }else{
            this.$alert("上传的服务承诺书文件上传失败,请修改文件名长度后重新上传", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
          }
        })
        .then(error => {
          console.log(error);
        });
      return;
    },

    del() {
      this.filename = "";
      this.imageUrl = "";
      this.fileurl = "";
    },
    del1() {
      this.filename1 = "";
      this.imageUrl1 = "";
      this.fileurl1 = "";
      console.log(
        this.fileurl,
        this.fileurl1,
        this.fileurl2,
        this.fileurl3,
        this.fileurl4
      );
    },
    del2() {
      this.filename2 = "";
      this.imageUrl2 = "";
      this.fileurl2 = "";
    },
    del3() {
      this.filename3 = "";
      this.imageUrl3 = "";
      this.fileurl3 = "";
    },
    del4() {
      this.filename4 = "";
      this.imageUrl4 = "";
      this.fileurl4 = "";
    },
    yulana1(file) {
      console.log(file, 111);
      console.log(this.fileLists[0]);
      window.open(file.url);
      return;
    },
    change(e) {
      this.tid = e;
    },
    change1(e) {
      this.rid = e;
    },
    change2(e) {
      this.first_level = e;
    },
    beforeAvatarUpload() {},
    handleAvatarSuccess(res, file) {
      let houzui = file.split(".");
      houzui = houzui[houzui.length - 1];
      console.log(res, file);
      this.fileurl = res.url;

      if (houzui == "doc" || houzui == "docx") {
        this.imageUrl = "/static/img/word.png";
      } else if (houzui == "pptx" || houzui == "ppt") {
        this.imageUrl = "/static/img/ppt.png";
      } else if (houzui == "pdf") {
        this.imageUrl = "/static/img/pdf.jpg";
      } else if (houzui == "xls" || houzui == "xlsx") {
        this.imageUrl = "/static/img/excel.png";
      } else if (houzui == "jpg" || houzui == "jpeg" || houzui == "png") {
        this.imageUrl = res.url;
      } else if (houzui == "zip" || houzui == "rar") {
        this.imageUrl = "/static/img/zip.png";
      }else if(houzui == "txt"){
         this.imageUrl = "/static/img/txt.jpg";
      }
      this.filename = res.name//res.name//res.name+'.'+res.extension;

      // console.log(file)
      // this.fileid = file.response.data.id;
      // this.filename = file.response.data.name+'.'+file.response.data.extension;
      // this.fileurl = file.response.data.url;

      // var index = file.response.data.url.lastIndexOf(".");
      // var filetype = file.response.data.url.substr(index + 1);
      // console.log(filetype);
      // if (filetype == "png" || filetype == "jpg" || filetype == "jpeg") {
      //   this.imageUrl = file.response.data.url;
      // } else {
      //   this.imageUrl = "/index/timg.jpg";
      // }
      // console.log(file);
    },
    next(e) {
      this.sub = e;
    },
    successUpload(response, file, fileList) {
      this.picture.push({
        name: file.name,
        url: file.response.data.url
      });
         this.fileLists.push({
        name: file.name,
        url: file.response.data.url
      });
      console.log(this.fileLists,1900)
      //this.hrefurl = file.response.data.url
    },
    // successUpload(response, file, fileList) {
    //   this.picture.push({
    //     name: file.name,
    //     url: file.response.data.url
    //   });
    // },
    successUploadTwo(response, file, fileList) {
      this.fileid = file.response.data.id;
      this.filename = file.response.data.name;
      this.fileurl = file.response.data.url;
      console.log(file);
    },
    successUploadThree(response, file, fileList) {
      this.fileid = file.response.data.id;
      this.filename = file.response.data.name;
      this.fileurl = file.response.data.url;
      console.log(file);
    },
    // handleRemove(file, fileList) {
    //   this.picture.forEach(element => {
    //     if (file.name === element.name) {
    //       this.picture.splice(element, 1);
    //     }
    //   });
    // },
    handlePreview(file) {
      console.log(file);
      if (!!window.ActiveXObject || "ActiveXObject" in window) {
        alert("推荐谷歌进行文件预览");
      } else {
        window.open(file.url); //blob格式地址
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name} ?`);
    },
    handleAvatarSuccess1(res, file) {
      let houzui = file.split(".");
      houzui = houzui[houzui.length - 1];
      console.log(res, file);
      this.fileurl1 = res.url;

      if (houzui == "doc" || houzui == "docx") {
        this.imageUrl1 = "/static/img/word.png";
      } else if (houzui == "pptx" || houzui == "ppt") {
        this.imageUrl1 = "/static/img/ppt.png";
      } else if (houzui == "pdf") {
        this.imageUrl1 = "/static/img/pdf.jpg";
      } else if (houzui == "xls" || houzui == "xlsx") {
        this.imageUrl1 = "/static/img/excel.png";
      } else if (houzui == "jpg" || houzui == "jpeg" || houzui == "png") {
        this.imageUrl1 = res.url;
      } else if (houzui == "zip" || houzui == "rar") {
        this.imageUrl1 = "/static/img/zip.png";
      }else if(houzui == "txt"){
         this.imageUrl1 = "/static/img/txt.jpg";
      }
      this.filename1 =res.name// res.name+'.'+res.extension;

      // console.log(file);
      // this.fileurl1 = file.response.data.url;
      // // this.imageUrl1 = "/index/timg.jpg";
      // this.filename1 =
      //   file.response.data.name + "." + file.response.data.extension;
      // var index = file.response.data.url.lastIndexOf(".");
      // var filetype = file.response.data.url.substr(index + 1);
      // console.log(filetype);
      // if (filetype == "png" || filetype == "jpg" || filetype == "jpeg") {
      //   this.imageUrl1 = file.response.data.url;
      // } else {
      //   this.imageUrl1 = "/index/timg.jpg";
      // }

      // this.imageUrl1 = URL.createObjectURL(file.raw);
      //         if(file.response.data.extension=="docx"){
      // this.imageUrl1 = "../../../src/static/img/word.png";
      //     }else if(file.response.data.extension=="xls"){
      //       this.imageUrl1 = "../../../src/static/img/excel.png";
      //     }else if(file.response.data.extension=="pptx"){
      //       this.imageUrl1  = "../../../src/static/img/ppt.png";
      //     }else if(file.response.data.extension=="pdf"){
      //       this.imageUrl1 = "../../../src/static/img/pdf.jpg";
      //     }
    },

    handleAvatarSuccess2(res, file) {
      let houzui = file.split(".");
      houzui = houzui[houzui.length - 1];
      console.log(res, file);
      this.fileurl2 = res.url;

      if (houzui == "doc" || houzui == "docx") {
        this.imageUrl2 = "/static/img/word.png";
      } else if (houzui == "pptx" || houzui == "ppt") {
        this.imageUrl2 = "/static/img/ppt.png";
      } else if (houzui == "pdf") {
        this.imageUrl2 = "/static/img/pdf.jpg";
      } else if (houzui == "xls" || houzui == "xlsx") {
        this.imageUrl2 = "/static/img/excel.png";
      } else if (houzui == "jpg" || houzui == "jpeg" || houzui == "png") {
        this.imageUrl2 = res.url;
      } else if (houzui == "zip" || houzui == "rar") {
        this.imageUrl2 = "/static/img/zip.png";
      }else if(houzui == "txt"){
         this.imageUrl2 = "/static/img/txt.jpg";
      }
      this.filename2 =res.name// res.name+'.'+res.extension;

      // console.log(file);
      // this.fileurl2 = file.response.data.url;
      // // this.imageUrl2 = "/index/timg.jpg";
      // this.filename2 =
      //   file.response.data.name + "." + file.response.data.extension;
      // var index = file.response.data.url.lastIndexOf(".");
      // var filetype = file.response.data.url.substr(index + 1);
      // console.log(filetype);
      // if (filetype == "png" || filetype == "jpg" || filetype == "jpeg") {
      //   this.imageUrl2 = file.response.data.url;
      // } else {
      //   // console.log(2666666)
      //   this.imageUrl2 = "/index/timg.jpg";
      // }

      // this.imageUrl2 = URL.createObjectURL(file.raw);
      //         if(file.response.data.extension=="docx"){
      // this.imageUrl2 = "../../../src/static/img/word.png";
      //     }else if(file.response.data.extension=="xls"){
      //       this.imageUrl2 = "../../../src/static/img/excel.png";
      //     }else if(file.response.data.extension=="pptx"){
      //       this.imageUrl2 = "../../../src/static/img/ppt.png";
      //     }else if(file.response.data.extension=="pdf"){
      //       this.imageUrl2 = "../../../src/static/img/pdf.jpg";
      //     }
    },
    handleAvatarSuccess3(res, file) {
      let houzui = file.split(".");
      houzui = houzui[houzui.length - 1];
      console.log(res, file);
      this.fileurl3 = res.url;

      if (houzui == "doc" || houzui == "docx") {
        this.imageUrl3 = "/static/img/word.png";
      } else if (houzui == "pptx" || houzui == "ppt") {
        this.imageUrl3 = "/static/img/ppt.png";
      } else if (houzui == "pdf") {
        this.imageUrl3 = "/static/img/pdf.jpg";
      } else if (houzui == "xls" || houzui == "xlsx") {
        this.imageUrl3 = "/static/img/excel.png";
      } else if (houzui == "jpg" || houzui == "jpeg" || houzui == "png") {
        this.imageUrl3 = res.url;
      } else if (houzui == "zip" || houzui == "rar") {
        this.imageUrl3 = "/static/img/zip.png";
      }else if(houzui == "txt"){
         this.imageUrl3 = "/static/img/txt.jpg";
      }
      console.log(res.name);
      this.filename3 =res.name// res.name+'.'+res.extension;

      // console.log(file);
      // this.fileurl3 = file.response.data.url;
      // // this.imageUrl3 = "/index/timg.jpg";
      // this.filename3 =
      //   file.response.data.name + "." + file.response.data.extension;
      // var index = file.response.data.url.lastIndexOf(".");
      // var filetype = file.response.data.url.substr(index + 1);
      // console.log(filetype);
      // if (filetype == "png" || filetype == "jpg" || filetype == "jpeg") {
      //   this.imageUrl3 = file.response.data.url;
      // } else {
      //   this.imageUrl3 = "/index/timg.jpg";
      // }

      // this.imageUrl3 = URL.createObjectURL(file.raw);
      //         if(file.response.data.extension=="docx"){
      // this.imageUrl3 = "../../../src/static/img/word.png";
      //     }else if(file.response.data.extension=="xls"){
      //       this.imageUrl3 = "../../../src/static/img/excel.png";
      //     }else if(file.response.data.extension=="pptx"){
      //       this.imageUrl3 = "../../../src/static/img/ppt.png";
      //     }else if(file.response.data.extension=="pdf"){
      //       this.imageUrl3 = "../../../src/static/img/pdf.jpg";
      //     }
    },
    handleAvatarSuccess4(res, file) { 
      let houzui = file.split(".");
      houzui = houzui[houzui.length - 1];
      console.log(res, file);
      this.fileurl4 = res.url;

      if (houzui == "doc" || houzui == "docx") {
        this.imageUrl4 = "/static/img/word.png";
      } else if (houzui == "pptx" || houzui == "ppt") {
        this.imageUrl4 = "/static/img/ppt.png";
      } else if (houzui == "pdf") {
        this.imageUrl4 = "/static/img/pdf.jpg";
      } else if (houzui == "xls" || houzui == "xlsx") {
        this.imageUrl4 = "/static/img/excel.png";
      } else if (houzui == "jpg" || houzui == "jpeg" || houzui == "png") {
        this.imageUrl4 = res.url;
      } else if (houzui == "zip" || houzui == "rar") {
        this.imageUrl4 = "/static/img/zip.png";
      }else if(houzui == "txt"){
         this.imageUrl4 = "/static/img/txt.jpg";
      }
      this.filename4 =res.name// res.name+'.'+res.extension;

      // console.log(file);
      // this.fileurl4 = file.response.data.url;
      // // this.imageUrl4 = URL.createObjectURL(file.raw);
      // // this.imageUrl4 = "/index/timg.jpg";
      // this.filename4 =
      //   file.response.data.name + "." + file.response.data.extension;

      // var index = file.response.data.url.lastIndexOf(".");
      // var filetype = file.response.data.url.substr(index + 1);
      // console.log(filetype);
      // if (filetype == "png" || filetype == "jpg" || filetype == "jpeg") {
      //   this.imageUrl4 = file.response.data.url;
      // } else {
      //   this.imageUrl4 = "/index/timg.jpg";
      // }
      //         if(file.response.data.extension=="docx"){
      // this.imageUrl4 = "../../../src/static/img/word.png";
      //     }else if(file.response.data.extension=="xls"){
      //       this.imageUrl4 = "../../../src/static/img/excel.png";
      //     }else if(file.response.data.extension=="pptx"){
      //       this.imageUrl4 = "../../../src/static/img/ppt.png";
      //     }else if(file.response.data.extension=="pdf"){
      //       this.imageUrl4 = "../../../src/static/img/pdf.jpg";
      //     }
    },
    submitForm(formName, a) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.next(1);
          // if (a == 1) {
          //   this.submit(0);
          // } else if (a == 2) {
            
          //   // this.submit(1);
          // }
          if(a){
            console.log(this.filename,this.filename1,5556)
            if (this.filename.length && this.filename1.length) {
            if (a == 1) {
              this.submit(0);
            } else if (a == 2) {
              this.submit(1);
            }
          } else {
            this.$alert("请先上传必传文件再操作", "提示", {
              confirmButtonText: "确定",
              callback: action => {
                // this.$message({
                //   type: 'info',
                //   message: ''
                // });
              }
            });
            return;
          }
          }
        } else {
          console.log("error submit!!");
          this.$alert("请完善资料", "提示", {
            confirmButtonText: "确定",
            callback: action => {
              // this.$message({
              //   type: 'info',
              //   message: ''
              // });
            }
          });
          return false;
        }
      });
    },
    
    handleRemove(file, fileList) {
      this.picture.forEach(element => {
        if (file.name === element.name) {
          this.picture.splice(element, 1);
        }
      });
      this.fileLists.forEach(element => {
        if (file.name === element.name) {
          this.fileLists.splice(this.fileLists.lastIndexOf(element), 1);
        }
      });
    },
    // handlePreview(file) {
    //   console.log(file);
    //   //    if (!!window.ActiveXObject || "ActiveXObject" in window) {
    //   //   alert("推荐谷歌进行文件预览");
    //   // } else {
    //   //   window.open(file.url); //blob格式地址
    //   // }
    // },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name} ?`);
    },
    /** 获取富文本内容 */
    aboutUs(data) {
      this.ruleForm.decldes = data;
    },
    projectBrief(data) {
      this.ruleForm.prodes = data;
    },
    projectAssessment(data) {
      this.ruleForm.prodemo = data;
    },
    existingBasis(data) {
      this.ruleForm.prodemojc = data;
    },
    methodsWay(data) {
      this.ruleForm.prodemotj = data;
    },
    scheduling(data) {
      this.ruleForm.prodemojd = data;
    },
    desiredEffect(data) {
      this.ruleForm.prodemoxg = data;
    },
    divisionLabor(data) {
      this.ruleForm.prodemofg = data;
    },
    cover(data) {
      this.ruleForm.prodemotwo = data;
    },
    quillVal(data) {
      this.ruleForm.funds = data;
    },
    /** 申报单位承诺 */
    thf() {
      this.$set(this.ruleForm, "thff", !this.ruleForm.thff);
      // this.ruleForm.thff = !this.ruleForm.thff;
      console.log(this.ruleForm.thff);
    },
    /** 下一步 */
    btn(index) {
      let s = this.sub;
      s = index;
      // this.sub = s
      this.assignment(this.bgData);
      let regd = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
      let regs = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      // console.log( this.bgData)
      // console.log(this.name)
      // console.log(this.company)
      // console.log(this.tid)
      // console.log(this.rid)
      // console.log(this.first_level)
      if (
        this.name === "" ||
        this.company === "" ||
        this.tid === "" ||
        this.rid === "" ||
        this.first_level === "" ||
        this.secondary === "" ||
        this.fieldeara === "" ||
        this.attribute === "" ||
        this.aterm === "" ||
        this.fterm === "" ||
        this.postaladdress === "" ||
        this.postalcode === "" ||
        this.pmail === "" ||
        this.plegal === "" ||
        this.plcode === "" ||
        this.pname === "" ||
        this.poster === "" ||
        this.poffice_tel === "" ||
        this.aphone === "" ||
        this.cname === "" ||
        this.cpost === "" ||
        this.coffice_tel === "" ||
        this.cphone === ""
      ) {
        alert("请认真核对填写内容完整性！");
        return false;
      } else if (this.aterm > this.fterm) {
        alert("截止日期应比申请日期晚");
        return false;
      } else if (
        !regd.test(this.bgData.poffice_tel) ||
        !regd.test(this.bgData.coffice_tel)
      ) {
        alert("请填写正确的电话号码！");
        return false;
      } else if (
        !regs.test(this.bgData.aphone) ||
        !regs.test(this.bgData.cphone)
      ) {
        alert("请填写正确的手机号码！");
        return false;
      } else {
        this.sub = s;
      }
    },
    /** 保存和提交 */
    submit(index) {
      if (index == 0) {
        this.$confirm("此操作将保存当前填写的内容, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            if (this.ruleForm.thff) {
              console.log(this.picture);
              this.ruleForm.party_id = sessionStorage.getItem("party_id");
              this.ruleForm.proimages = JSON.stringify(this.picture);
              this.ruleForm.project_id = this.$route.query.id;
              this.ruleForm.probook = this.fileurl;
              this.ruleForm.fangan = this.fileurl1;
              this.ruleForm.pifu = this.fileurl2;
              this.ruleForm.pact = this.fileurl3;
              this.ruleForm.promise = this.fileurl4;
              console.log(this.ruleForm, 1664);
              for (let a in this.types) {
                console.log(this.types[a]);
                if (this.types[a] == this.ruleForm.tid) {
                  this.ruleForm.tid = a;
                  console.log(this.ruleForm.tid, "aaa");
                }
              }
              for (let b in this.area) {
                // console.log(this.types[i])
                if (this.area[b] == this.ruleForm.rid) {
                  this.ruleForm.rid = b;
                  // console.log(this.ruleForm.rid)
                }
              }
              for (let c in this.first_levels) {
                // console.log(this.types[i])
                if (this.first_levels[c] == this.ruleForm.first_level) {
                  this.ruleForm.first_level = c;
                  // console.log(this.ruleForm.first_level)
                }
              }
              console.log(
                this.fileurl,

                this.fileurl2,
                this.fileurl3,
                this.fileurl4
              );
              console.log(this.fileLists);
              for (let m in this.ruleForm1) {
                this.ruleForm[m] = this.ruleForm1[m];
              }
              console.log(this.ruleForm.prodemo.length);
              if (this.ruleForm.prodes.length == 0 || this.ruleForm.prodes=="") {
              this.$alert("项目简介不能为空并不得低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemo.length == 0 || this.ruleForm.prodemo=="") {
              this.$alert("项目实施必要性不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemojc.length == 0 || this.ruleForm.prodemojc=="") {
              this.$alert("项目实施的基础不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemotj.length == 0 || this.ruleForm.prodemotj=="") {
              this.$alert("具体方法和途径不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemojd.length == 0 || this.ruleForm.prodemojd=="") {
              this.$alert("进度安排不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemoxg.length == 0 || this.ruleForm.prodemoxg=="") {
              this.$alert("预期效果不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemofg.length == 0 || this.ruleForm.prodemofg=="") {
              this.$alert("项目团队及分工不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemotwo.length == 0 || this.ruleForm.prodemotwo=="") {
              this.$alert(
                "项目实施涵盖范围,规模,人群及创新等不能为空并不的低于四个汉字",
                "提示",
                {
                  confirmButtonText: "确定",
                  callback: action => {}
                }
              );
              return false;
            } else if (this.ruleForm.funds.length == 0 || this.ruleForm.funds=="") {
              this.$alert("经费预算不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            }
            else if(this.ruleForm.probook.length ==0 //&&
              //&&
              // this.ruleForm.pifu.length &&
              // this.ruleForm.pact.length &&
              // this.ruleForm.promise.length
            ) {
              this.$alert("请上传项目申报书", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
              
            } else if(this.ruleForm.fangan.length == 0 ){
              this.$alert("请上传实施方案", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false
            }else if(this.picture.length == 0 ){
              this.$alert("请上传项目主责单位意见", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false
            }else{
               this.submitYes(index);
            }
            } else {
              this.$message({
                type: "info",
                message: "请同意申报单位承诺"
              });
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消保存"
            });
          });
      } else if (index == 1) {
        this.$confirm("请确认是否提交项目优化信息，提交后不可修改！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            if (this.ruleForm.thff) {
              console.log(this.picture);
              this.ruleForm.party_id = sessionStorage.getItem("party_id");
              this.ruleForm.proimages = JSON.stringify(this.picture);
              this.ruleForm.project_id = this.$route.query.id;
              this.ruleForm.probook = this.fileurl;
              this.ruleForm.fangan = this.fileurl1;
              this.ruleForm.pifu = this.fileurl2;
              this.ruleForm.pact = this.fileurl3;
              this.ruleForm.promise = this.fileurl4;
              for (let a in this.types) {
                console.log(this.types[a]);
                if (this.types[a] == this.ruleForm.tid) {
                  this.ruleForm.tid = a;
                  console.log(this.ruleForm.tid, "aaa");
                }
              }
              for (let b in this.area) {
                // console.log(this.types[i])
                if (this.area[b] == this.ruleForm.rid) {
                  this.ruleForm.rid = b;
                  // console.log(this.ruleForm.rid)
                }
              }
              for (let c in this.first_levels) {
                // console.log(this.types[i])
                if (this.first_levels[c] == this.ruleForm.first_level) {
                  this.ruleForm.first_level = c;
                  // console.log(this.ruleForm.first_level)
                }
              }
              console.log(
                this.fileurl,

                this.fileurl2,
                this.fileurl3,
                this.fileurl4
              );
              console.log(this.fileLists);
              for (let m in this.ruleForm1) {
                this.ruleForm[m] = this.ruleForm1[m];
              }
              console.log(this.ruleForm.prodes.length);
            if (this.ruleForm.prodes.length == 0 || this.ruleForm.prodes=="") {
              this.$alert("项目简介不能为空并不得低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemo.length == 0 || this.ruleForm.prodemo=="") {
              this.$alert("项目实施必要性不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemojc.length == 0 || this.ruleForm.prodemojc=="") {
              this.$alert("项目实施的基础不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemotj.length == 0 || this.ruleForm.prodemotj=="") {
              this.$alert("具体方法和途径不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemojd.length == 0 || this.ruleForm.prodemojd=="") {
              this.$alert("进度安排不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemoxg.length == 0 || this.ruleForm.prodemoxg=="") {
              this.$alert("预期效果不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemofg.length == 0 || this.ruleForm.prodemofg=="") {
              this.$alert("项目团队及分工不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            } else if (this.ruleForm.prodemotwo.length == 0 || this.ruleForm.prodemotwo=="") {
              this.$alert(
                "项目实施涵盖范围,规模,人群及创新等不能为空并不的低于四个汉字",
                "提示",
                {
                  confirmButtonText: "确定",
                  callback: action => {}
                }
              );
              return false;
            } else if (this.ruleForm.funds.length == 0 || this.ruleForm.funds=="") {
              this.$alert("经费预算不能为空并不的低于四个汉字", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false;
            }else if (
              this.ruleForm.probook.length ==0 //&&
              //&&
              // this.ruleForm.pifu.length &&
              // this.ruleForm.pact.length &&
              // this.ruleForm.promise.length
            ) {
              this.$alert("请上传项目申报书", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              
            } else if(this.picture.length == 0 ){
              this.$alert("请上传项目主责单位意见", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
              return false
            }else if(this.ruleForm.fangan.length == 0 ){
              this.$alert("请上传实施方案", "提示", {
                confirmButtonText: "确定",
                callback: action => {}
              });
            }else{
               this.submitYes(index);
            }
              //this.submitYes(index);
            } else {
              this.$message({
                type: "info",
                message: "请同意申报单位承诺"
              });
            }
          })
          .catch(() => {
            console.log(400);
            this.$message({
              type: "info",
              message: "已取消提交"
            });
          });
      }
    },
    /** 申报项目 */
    submitYes(e) {
      // this.popupStatus = false;
      let _this = this;
      if (e == 1) {
        this.ruleForm.subStatus = 1;
      } else {
        this.ruleForm.subStatus = 2;
      }
      this.$http({
        method: "post",
        url: "v1/project/apply-two",
        data: this.ruleForm
      })
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            if (res.data.data.code === 200) {
              if (e == 1) {
                this.$message({
                  type: "success",
                  message: "提交成功!"
                });
              } else {
                this.$message({
                  type: "success",
                  message: "保存成功!"
                });
              }
              _this.proimages = "";
              // _this.$router.push({
              //   name: "project"
              // });
              _this.$router.go(-1)

            } else {
              this.$message({
                type: "info",
                message: res.data.data.message
              });
            }
          } else {
            this.$message({
              type: "info",
              message: res.data.data.message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /** 获取下拉框的数据 */
    getData() {
      let _this = this;
      this.$http({
        method: "get",
        url: "v1/project/get-info",
        data: {}
      })
        .then(res => {
          if (res.data.code === 200) {
            _this.types = res.data.data.type;
            _this.area = res.data.data.area;
            delete _this.area[""];
            _this.first_levels = res.data.data.first_level;
            if (this.$route.query.id) {
              let id = this.$route.query.id;
              this.getDataDetails(id);
            }
          } else {
            _this.$message.error("请求数据有问题！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /** 判断是否有权限进行项目申报 */
    status() {
      let id = sessionStorage.id;
      let _this = this;
      this.$http({
        method: "post",
        url: "v1/society/get-status",
        data: { id: id }
      })
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data.status === 0) {
              alert("您当前社会组织状态为：活动异常，请与主管单位联系审核！");
              _this.$router.push({
                name: "project"
              });
            } else if (res.data.data.status === 3) {
              alert("您当前社会组织状态为：活动异常，请与主管单位联系审核！");
              _this.$router.push({
                name: "project"
              });
            } else if (res.data.data.status === 4) {
              alert("项目申报暂未开始！");
              _this.$router.push({
                name: "project"
              });
            } else {
              _this.getData();
            }
          } else {
            _this.$message.error("请求数据有问题！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /** 为提交时的赋值操作 */
    assignment(data) {
      this.name = data.name;
      // this.company = data.company
      for (var prop in this.types) {
        if (data.tid === this.types[prop]) {
          this.tid = prop;
        }
      }
      for (var prop in this.area) {
        if (data.rid === this.area[prop]) {
          this.rid = prop;
        }
      }
      // this.bgData.area.forEach((item, index) => {
      //   if (data.rid === item) {
      //     this.rid = parseInt(index)
      //   }
      // })
      for (let prop in this.first_levels) {
        if (data.first_level === this.first_levels[prop]) {
          this.first_level = prop;
        }
      }
      this.secondary = data.secondary;
      this.fieldeara = data.fieldeara;
      this.attribute = data.attribute;
      this.aterm = data.aterm;
      this.fterm = data.fterm;
      this.postaladdress = data.postaladdress;
      this.postalcode = data.postalcode;
      this.pmail = data.pmail;
      this.fax_tel = data.fax_tel;
      this.plegal = data.plegal;
      this.plcode = data.plcode;
      this.pname = data.pname;
      this.poster = data.poster;
      this.poffice_tel = data.poffice_tel;
      this.aphone = data.aphone;
      this.cname = data.cname;
      this.cpost = data.cpost;
      this.coffice_tel = data.coffice_tel;
      this.cphone = data.cphone;
      this.prespo = data.prespo;
      this.respoadd = data.respoadd;
      this.respopcode = data.respopcode;
      this.respomail = data.respomail;
      this.respophone = data.respophone;
      this.respopname = data.respopname;
      this.respopost = data.respopost;
      this.respoophone = data.respoophone;
      this.respoptel = data.respoptel;
      this.respocname = data.respocname;
      this.respocpost = data.respocpost;
      this.respocophone = data.respocophone;
      this.respoctel = data.respoctel;
      this.aboutUsVal = data.decldes;
      this.aboutUsText = data.decldes;
      this.projectBriefVal = data.prodes;
      this.projectBriefText = data.prodes;
      this.projectAssessmentVal = data.prodemo;
      this.projectAssessmentText = data.prodemo;
      this.existingBasisVal = data.prodemojc;
      this.existingBasisText = data.prodemojc;
      this.methodsWayVal = data.prodemotj;
      this.methodsWayText = data.prodemotj;
      this.schedulingVal = data.prodemojd;
      this.schedulingText = data.prodemojd;
      this.desiredEffectVal = data.prodemoxg;
      this.desiredEffectText = data.prodemoxg;
      this.divisionLaborVal = data.prodemofg;
      this.divisionLaborText = data.prodemofg;
      this.coverVal = data.prodemotwo;
      this.coverText = data.prodemotwo;
      this.initialTextVal = data.funds;
      this.initialText = data.funds;

      this.pid = data.id;

      if (data.proimages) {
        let imgs = JSON.parse(data.proimages);
        this.fileLists = imgs;
      }

      this.picture = this.fileLists;
    },
    getDataDetails(id) {
      this.$http({
        method: "post",
        url: "v1/project/detset",
        data: {
          id: id
        }
      })
        .then(res => {
          if (res.data.data.code === 200) {
            this.bgData = res.data.data.data.ProjectDetails;
            if (res.data.data.data.ProjectDetails) {
              this.ruleForm = res.data.data.data.ProjectDetails;
              for (let m in this.ruleForm1) {
                this.ruleForm1[m] = this.ruleForm[m];
              }
              this.fileurl = this.ruleForm.probook;
              this.fileurl1 = this.ruleForm.fangan;
              this.fileurl2 = this.ruleForm.pifu;
              this.fileurl3 = this.ruleForm.pact;
              this.fileurl4 = this.ruleForm.promise;
              console.log(this.ruleForm, 200);
            } else {
              this.$http({
                method: "post",
                url: "v1/project/details",
                data: {
                  id: id
                }
              })
                .then(res => {
                  let m = 0;
                  console.log(res, ".......");
                  if (res.data.data.code === 200) {
                    // this.bgData = res.data.data.data.ProjectDetails;
                    this.ruleForm = res.data.data.data.ProjectDetails;

                    this.ruleForm.prodes = "";
                    this.ruleForm.prodemo = "";
                    this.ruleForm.prodemojc = "";
                    this.ruleForm.prodemojd = "";
                    this.ruleForm.prodemotj = "";
                    this.ruleForm.prodemoxg = "";
                    this.ruleForm.prodemofg = "";
                    this.ruleForm.prodemotwo = "";
                    this.ruleForm.funds = "";
                    for (let m in this.ruleForm1) {
                      this.ruleForm1[m] = this.ruleForm[m];
                    }
                    console.log(this.dataFile, 400);
                    for (let i in res.data.data.data.ProjectReview) {
                      if (res.data.data.data.ProjectReview[i].sta == 1) {
                        m = i;
                      }
                    }
                    this.fileurl = this.ruleForm.probook;
                    this.fileurl1 = this.ruleForm.fangan;
                    this.fileurl2 = this.ruleForm.pifu;
                    this.fileurl3 = this.ruleForm.pact;
                    this.fileurl4 = this.ruleForm.promise;
                    console.log(m);
                    for (let n in this.zDate) {
                      if (n - m <= 0) {
                        this.zDate[n].type = 1;
                      } else {
                        this.zDate[n].type = 0;
                      }
                    }

                    // for(let w in this.zDate){
                    //   if(w<=m){
                    //     this.zDate[w].type=1
                    //     console.log(w,"aaa")
                    //   }else{
                    //     this.zDate[w].type=0
                    //   }
                    // }
                  } else {
                    // alert("请求失败！");
                  }
                })
                .catch(err => {
                  console.log(err);
                });
            }

            for (let i in this.ruleForm1) {
              this.ruleForm1[i] = this.ruleForm[i];
            }
            for (let i in this.types) {
              // console.log(this.types[i])
              if (this.types[i] == this.ruleForm.tid) {
                this.ruleForm.tid = i;
                // console.log(this.ruleForm.tid)
              }
            }
            for (let i in this.area) {
              // console.log(this.types[i])
              if (this.area[i] == this.ruleForm.rid) {
                this.ruleForm.rid = i;
                // console.log(this.ruleForm.rid)
              }
            }
            for (let i in this.first_levels) {
              // console.log(this.types[i])
              if (this.first_levels[i] == this.ruleForm.first_level) {
                this.ruleForm.first_level = i;
                // console.log(this.ruleForm.first_level)
              }
            }

            if (this.ruleForm.probook) {
              var index = this.ruleForm.probook.lastIndexOf(".");
              var filetype = this.ruleForm.probook.substr(index + 1);
              console.log(filetype);
              if (
                filetype == "png" ||
                filetype == "jpg" ||
                filetype == "jpeg"
              ) {
                this.imageUrl = this.ruleForm.probook;
                console.log(this.ruleForm.probook);
              } else {
                this.imageUrl = "/index/timg.jpg";
              }
              // console.log(filetype,122220)
              if (filetype == "docx" || filetype == "doc") {
                this.imageUrl = "../static/img/word.png";
              } else if (filetype == "xls" || filetype == "xlsx") {
                this.imageUrl = "../static/img/excel.png";
              } else if (filetype == "pptx" || filetype == "ppt") {
                this.imageUrl = "../static/img/ppt.png";
              } else if (filetype == "pdf") {
                this.imageUrl = "../static/img/pdf.jpg";
              } else if (filetype == "zip" || filetype == "rar") {
                this.imageUrl = "/static/img/zip.png";
              }else if (filetype == "txt") {
                this.imageUrl = "/static/img/txt.jpg";
              }
            }
            if (this.ruleForm.fangan) {
              this.imageUrl1 = "/index/timg.jpg";
              var index = this.ruleForm.fangan.lastIndexOf(".");
              var filetype = this.ruleForm.fangan.substr(index + 1);
              if (
                filetype == "png" ||
                filetype == "jpg" ||
                filetype == "jpeg"
              ) {
                this.imageUrl1 = this.ruleForm.fangan;
              }

              // console.log(filetype,122220)
              if (filetype == "docx" || filetype == "doc") {
                this.imageUrl1 = "../static/img/word.png";
              } else if (filetype == "xls" || filetype == "xlsx") {
                this.imageUrl1 = "../static/img/excel.png";
              } else if (filetype == "pptx" || filetype == "ppt") {
                this.imageUrl1 = "../static/img/ppt.png";
              } else if (filetype == "pdf") {
                this.imageUrl1 = "../static/img/pdf.jpg";
              }else if (filetype == "zip" || filetype == "rar") {
                this.imageUrl1 = "/static/img/zip.png";
              }else if (filetype == "txt") {
                this.imageUrl1 = "/static/img/txt.jpg";
              }
            }
            if (this.ruleForm.pifu) {
              this.imageUrl2 = "/index/timg.jpg";
              var index = this.ruleForm.pifu.lastIndexOf(".");
              var filetype = this.ruleForm.pifu.substr(index + 1);
              if (
                filetype == "png" ||
                filetype == "jpg" ||
                filetype == "jpeg"
              ) {
                this.imageUrl2 = this.ruleForm.pifu;
              }
              // console.log(filetype,122220)
              if (filetype == "docx" || filetype == "doc") {
                this.imageUrl2 = "../static/img/word.png";
              } else if (filetype == "xls" || filetype == "xlsx") {
                this.imageUrl2 = "../static/img/excel.png";
              } else if (filetype == "pptx" || filetype == "ppt") {
                this.imageUrl2 = "../static/img/ppt.png";
              } else if (filetype == "pdf") {
                this.imageUrl2 = "../static/img/pdf.jpg";
              }else if (filetype == "zip" || filetype == "rar") {
                this.imageUrl2 = "/static/img/zip.png";
              }else if (filetype == "txt") {
                this.imageUrl2 = "/static/img/txt.jpg";
              }
            }
            if (this.ruleForm.pact) {
              this.imageUrl3 = "/index/timg.jpg";
              var index = this.ruleForm.pact.lastIndexOf(".");
              var filetype = this.ruleForm.pact.substr(index + 1);
              if (
                filetype == "png" ||
                filetype == "jpg" ||
                filetype == "jpeg"
              ) {
                this.imageUrl3 = this.ruleForm.pact;
              }
              // console.log(filetype,122220)
              if (filetype == "docx" || filetype == "doc") {
                this.imageUrl3 = "../static/img/word.png";
              } else if (filetype == "xls" || filetype == "xlsx") {
                this.imageUrl3 = "../static/img/excel.png";
              } else if (filetype == "pptx" || filetype == "ppt") {
                this.imageUrl3 = "../static/img/ppt.png";
              } else if (filetype == "pdf") {
                this.imageUrl3 = "../static/img/pdf.jpg";
              }else if (filetype == "zip" || filetype == "rar") {
                this.imageUrl3 = "/static/img/zip.png";
              }else if (filetype == "txt") {
                this.imageUrl3 = "/static/img/txt.jpg";
              }
            }
            if (this.ruleForm.promise) {
              this.imageUrl4 = "/index/timg.jpg";
              var index = this.ruleForm.promise.lastIndexOf(".");
              var filetype = this.ruleForm.promise.substr(index + 1);
              if (
                filetype == "png" ||
                filetype == "jpg" ||
                filetype == "jpeg"
              ) {
                this.imageUrl4 = this.ruleForm.promise;
              }
              // console.log(filetype,122220)
              if (filetype == "docx" || filetype == "doc") {
                this.imageUrl4 = "../static/img/word.png";
              } else if (filetype == "xls" || filetype == "xlsx") {
                this.imageUrl4 = "../static/img/excel.png";
              } else if (filetype == "pptx" || filetype == "ppt") {
                this.imageUrl4 = "../static/img/ppt.png";
              } else if (filetype == "pdf") {
                this.imageUrl4 = "../static/img/pdf.jpg";
              }else if (filetype == "zip" || filetype == "rar") {
                this.imageUrl4 = "/static/img/zip.png";
              }else if (filetype == "txt") {
                this.imageUrl4 = "/static/img/txt.jpg";
              }
            }
            if(this.bgData){
                this.filename =this.bgData.probook? this.bgData.probook.substring(
              this.bgData.probook.lastIndexOf("/") + 1
            ):'';
            //sconsole.log(this.filename)
            this.filename1 =this.bgData.fangan? this.bgData.fangan.substring(
              this.bgData.fangan.lastIndexOf("/") + 1
            ):'';
            this.filename2 = this.bgData.pifu?this.bgData.pifu.substring(
              this.bgData.pifu.lastIndexOf("/") + 1
            ):'';
            this.filename3 =this.bgData.pact? this.bgData.pact.substring(
              this.bgData.pact.lastIndexOf("/") + 1
            ):'';
            this.filename4 = this.bgData.promise?this.bgData.promise.substring(
              this.bgData.promise.lastIndexOf("/") + 1
            ):'';

            let imgs = JSON.parse(this.bgData.proimages);
            this.fileLists = imgs;
            this.picture = this.fileLists;
            }
          
            // this.assignment(this.bgData);
          } else {
            alert("请求失败！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.company = sessionStorage.name;
    this.ruleForm.funds =""
    this.ruleForm.prodemotwo =""
    this.ruleForm.prodemofg =""
    this.ruleForm.prodemoxg =""
    this.ruleForm.prodemojd =""
    this.ruleForm.prodemotj =""
    this.ruleForm.prodemojc =""
    this.ruleForm.prodemo =""
    this.ruleForm.prodes =""
    console.log(this.ruleForm.funds)
  },
  mounted() {
    //this.status();
    this.getData();
  }
};
</script>
<style>
.el-upload-list__item-name{
  width: 310px;
}
</style>
<style lang="scss" scoped>

// .el-upload-list__item .el-icon-close-tip
.filenames {
  width: 155px;
  position: relative;
  // right: 20px;
  text-align: center;
}
.close {
  position: relative;
  left: 157px;
  top: -23px;
  cursor: pointer;
}
.tj {
  background-image: linear-gradient(
      69deg,
      #cc263f 0%,
      #f42b47 100%,
      #ed162d 100%,
      #e60012 100%
    ),
    linear-gradient(#e60012, #e60012);
}
.wrapper
  /deep/
  .xxx
  /deep/
  .xxxx
  /deep/
  .upload-demo
  /deep/
  .el-upload-list
  /deep/
  .el-upload-list__item
  /deep/
  .el-icon-close-tip {
  display: none !important;
}
.el-upload-list__item /deep/ .el-icon-close-tip {
  color: red;
}
.yulantext {
  font-size: 10px;
  position: relative;
  top: 47px;
  left: 288px;
  z-index: 999;
  color: #409eff;
  cursor: pointer;
}
.mid_box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top:20px;

  .avatar-uploader {
    margin-right: 20px;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-icon-plus:before {
  position: relative;
  top: 7px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 96px;
  line-height: 80px;
  text-align: center;
  border: 1.5px dashed #666;
  margin-left: 30px;
  // margin-top: 15px;
}
.avatar {
  width: 100px;
  height: 96px;
  display: block;
  margin-left: 40px;
}
.box1 {
  width: 127px;
  font-size: 15px;
  margin-top: 20px;
  margin-left: 29px;
  word-wrap: break-word;
  margin-right: 35px;
  // text-indent: -4px;
  //     overflow: hidden;
  //   text-overflow: ellipsis;
  white-space: nowrap;
}
.rich {
  z-index: 10;
  width: 100%;
  margin: 30px auto 0px;
  height: 320px;
}
.img-img {
  margin-top: 25px;
  width: 150px;
  height: auto;

  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
}
.wrapper {
  min-width: 1280px;
  box-sizing: border-box;

  .queren {
    z-index: 999;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0%;
    top: 0%;
    background-color: rgba($color: #000, $alpha: 0.56);
    display: flex;
    align-items: center;
    justify-content: center;

    & > div {
      width: 500px;
      height: 400px;
      background: #fff;
      border-radius: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 100px 0 100px;
      box-sizing: border-box;

      & > span {
        text-align: center;
        width: 120%;
        color: #000;
      }

      & > p {
        font-size: 32px;
        font-weight: 600;
      }

      & > div {
        width: 100%;
        padding: 32px;
        box-sizing: border-box;
        margin: 20px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 30px;
          cursor: pointer;
        }
      }
    }
  }

  #box {
    margin: 40px auto 0;
    padding: 34px 32px 100px 28px;
    box-sizing: border-box;
    width: 1200px;
    background-color: #ffffff;

    form {
      .ll {
        margin-top: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        button[type="button"] {
          margin-right: 152px;
          width: 197px;
          height: 63px;
          background-color: #ff9800;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: 400;
          font-stretch: normal;
          line-height: 63px;
          letter-spacing: 0px;
          color: #ffffff;
          text-align: center;
          outline: none;
          border: 0;
        }

        button[type="submit"] {
          width: 197px;
          height: 63px;
          background-color: #e60012;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 63px;
          text-align: center;
          letter-spacing: 0px;
          color: #ffffff;
          outline: none;
          border: 0;
        }
      }

      .xxx {
        margin-top: 60px;
        width: 100%;
        // height: 72px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        .plpl {
          display: flex;
          align-items: center;
          label {
            margin-left: 16px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 25px;
            letter-spacing: 0px;
            color: #323232;
          }

          .iconfont {
            font-size: 22px;
            color: #999;
          }
          .ic {
            color: #e60012;
          }
        }

        .xxxx {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          span {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            text-align: center;
            margin-left: 25px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #000;
          }

          /deep/ .upload-demo {
            margin-bottom: 10%;
          }

          /deep/ .el-button--primary {
            margin-top: 32px;
            border: none;
            cursor: pointer;
            width: 96px;
            height: 32px;
            border-radius: 4px;
            background-image: linear-gradient(
                69deg,
                #cc263f 0%,
                #f42b47 100%,
                #ed162d 100%,
                #e60012 100%
              ),
              linear-gradient(#e60012, #e60012);
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }

          /deep/ .el-upload-list.el-upload-list--text {
            max-height: 100px;
            // overflow-y: scroll;
            width: 475px;
            &::-webkit-scrollbar {
              width: 3px;
              // height: 5px;
            }

            &::-webkit-scrollbar-track-piece {
              background-color: rgba(0, 0, 0, 0.2);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb:vertical {
              height: 5px;
              background-color: rgba(125, 125, 125, 0.7);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb:horizontal {
              width: 5px;
              background-color: rgba(125, 125, 125, 0.7);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }
          }
        }

        .btnn {
          cursor: pointer;
          width: 96px;
          height: 32px;
          background-image: linear-gradient(
              69deg,
              #cc263f 0%,
              #f42b47 100%,
              #ed162d 100%,
              #e60012 100%
            ),
            linear-gradient(#e60012, #e60012);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;

          label {
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }
        }
      }

      .xx {
        margin-top: 60px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        textarea {
          margin-top: 30px;
          width: 1139px;
          height: 138px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          resize: none !important;

          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #999999;
        }

        article {
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #999;
        }

        p {
          margin-top: 38px;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        h5 {
          width: 100%;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        h3 {
          width: 100%;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
          margin-top: 38px;
          text-align: left;
        }
      }

      .cc {
        width: 1140px;
        margin: 0 auto 0px;
        aside {
          width: 100%;
          height: 43px;
          div {
            display: flex;
            align-items: center;

            label {
              display: inline-block;
              // width: 101px;
              height: 43px;
              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 43px;
              text-align: right;
              letter-spacing: 0px;
              color: #323232;
              white-space: nowrap;
            }

            .i-i {
              width: 1009px;
              height: 43px;
              background-color: #ffffff;
              border: solid 1px #c7c7c7;
              outline: none;
              margin-left: 20px;
              font-family: "MicrosoftYaHei";
              font-size: 18px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #323232;
            }
          }
        }
      }

      .btn {
        margin: 60px auto 0;
        width: 230px;
        height: 63px;
        margin-right: 480px;
        background-color: #e60012;
        border-radius: 5px;
        font-family: "MicrosoftYaHei";
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 63px;
        letter-spacing: 0px;
        text-align: center;
        color: #ffffff;
      }

      aside {
        width: 1138px;
        height: 43px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        label {
          display: inline-block;
          width: 130px;
          height: 43px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 43px;
          text-align: right;
          letter-spacing: 0px;
          color: #323232;
          white-space: nowrap;
        }

        select {
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 360px center no-repeat;
          background-size: 14px 8px;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          // padding-left: 83px;
          box-sizing: border-box;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        input {
          box-sizing: border-box;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        .i {
          width: 151px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }
      }

      section {
        width: 1138px;
        height: 43px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        label {
          display: inline-block;
          width: 100px;
          height: 43px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 43px;
          text-align: right;
          letter-spacing: 0px;
          color: #323232;
          white-space: nowrap;
        }

        select {
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 360px center no-repeat;
          background-size: 14px 8px;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          // padding-left: 83px;
          box-sizing: border-box;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        input {
          box-sizing: border-box;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        .i {
          width: 151px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }
      }

      h4 {
        width: 1138px;
        height: 38px;
        font-family: "MicrosoftYaHei";
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        padding-left: 30px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        margin-bottom: 54px;
      }
    }

    .box {
      width: 395px;
      height: 34px;
      margin: 44px auto 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        width: 192px;
        height: 34px;
        background-size: 100% 100%;
        font-family: "MicrosoftYaHei";
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34px;
        text-align: center;
        letter-spacing: 0px;
        color: #333333;
      }

      .color {
        color: #fff;
      }
    }

    h3 {
      // width: 89px;
      text-align: center;
      height: 23px;
      margin: 0 auto;
      font-family: "MicrosoftYaHei";
      font-size: 22px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
    }
  }

  .footer {
    margin-top: 80px;
  }
}
</style>
